<template>
	<view class="container">
		<view class="header">
			<uni-nav-bar statusBar="true" fixed="true" @clickLeft="goBack" :color="navColor" leftIcon="back" :background="navBg">
				<view class="navTitle">
					<text>商户管理中心</text>
					<text>STORE CONSUMPTION</text>
				</view>
			</uni-nav-bar>
			<view class="checkout" @tap="goBack" :style="{top:fixTop + 10 + 'px'}">
				<image src="/static/images/center/checkout.png" mode=""></image>
				<text>切换为个人</text>
			</view>
			<view class="logoBox">
				<image src="https://inclusivecommunity.oss-cn-chengdu.aliyuncs.com/attach/2020-07/11d8220200709195639894.png" mode=""></image>
				<view class="title">
					<text>国家普惠社区</text>
					<text>GUOJIAPUHUISHEQU</text>
				</view>
			</view>
		</view>

		<view class="cover-container">
			<!-- 公告 -->
			<view class='notice-board'>
				<view class="icon-bg">
					<image src="/static/images/public/guangbo.png" mode=""></image>
				</view>
				<view class="scorll-view">
					<view class="notice" :class="[animation?'animation':'']">
						<text v-for="(item,index) in noticeList" :key="index">{{item.content}}</text>
					</view>
				</view>
			</view>
			<view class="shopCountBox">
				<view class="my-wallet" @tap="navTo('/business/wallet/wallet?money='+sellerInfo.balance)">
					<text class="desc">我的钱包</text>
					<view class="simple">￥
						<text class="num">{{sellerInfo.balance || 0}}</text>
					</view>
				</view>
				<view class="my-wallet" @tap="navTo('/business/blankShell/blankShell')">
					<text class="desc">我的黑贝壳</text>
					<view class="simple">
						<text class="num">{{shellList[0].count || 0}}</text>
					</view>
				</view>
			</view>
			<view class="btnBox">
				<view class="btn" @tap="navTo('/business/shopInfo/shopInfo?type='+ sellerInfo.bank_type)">
					商户信息
				</view>
				<view class="btn" @tap="navTo('/business/storeCredit/storeCredit?id='+ sellerInfo.seller_id)">
					商业授信额
				</view>
			</view>
			<view class="condition-tab">
				<uui-tab class="c-tab" :tabs="navbar" :currentTab="currentTab>1?0:currentTab" @change="tabChange" itemWidth="50%"
				 color="#333333" selectedColor="#57BE6A" sliderBgColor="#57BE6A" :fontBold="true" :bottomBorder="false"></uui-tab>
			</view>
			<!-- 内容 -->
			<view class="offline-con" v-show="currentTab == 0">
				<view class="share" v-if="sellerInfo.is_open_offline && sellerInfo.verify_status== 1 && sellerInfo.enabled== 0">
					<image :src="sellerInfo.logo" mode=""></image>
					<view class="right">
						<view class="title">
							<view class="title__name">
								<image v-if="sellerInfo.seller_type == 2" class="a" src="/static/images/public/123.png" mode=""></image>
								<text>{{sellerInfo.seller_name }}</text>
								<image src="/static/images/index/index_shophot.png" mode="aspectFill"></image>
							</view>
						</view>
						<view class="info__rate">
							<uni-rate class="rate" active="white" normal="white" bgSeleColor="#E65431" bgNoSeleColor="grey" :isIndexRate="true"
							 :size="15" :current="5" disabled></uni-rate>
							<text>{{sellerInfo.consumers }}人来过</text>
						</view>
						<view class="info__type">{{sellerInfo.cate_name}}</view>
						<view class="info__label" v-if="sellerInfo.label">
							<view class="label_item" v-for="(it,ind) in sellerInfo.label" :key="ind">{{it}}</view>
						</view>
					</view>
				</view>
				<view class="statistical my-wallet" v-if="sellerInfo.is_open_offline && sellerInfo.verify_status== 1 && sellerInfo.enabled== 0">
					<view class="simple" @tap="navTo('/business/walletBill/walletBill?state='+1)">
						<text class="desc">今日订单(个)</text>
						<view class="count">{{sellerInfo.offline_today_pay_order_count}}</view>
					</view>
					<view class="simple" @tap="navTo('/business/myPromote/myPromote?status=offline')">
						<text class="desc">今日贝壳收益(个)</text>
						<view class="count">
							<image src="/static/images/public/shellIcon.png" mode=""></image>
							{{sellerInfo.offline_today_seller_shell_promote}}
						</view>
					</view>
				</view>
				<view class="notOpen" v-else>
					<text v-if="sellerInfo.verify_status == -1&&sellerInfo.is_open_offline == 1&&sellerInfo.enabled== 0">
						审核失败，点击查看详情
					</text>
					<text v-else-if="sellerInfo.verify_status == 0&&sellerInfo.is_open_offline == 1&&sellerInfo.enabled== 0">
						申请审核中，请耐心等待!
					</text>
					<text v-else-if="sellerInfo.enabled== 1">
						店铺被禁用,请联系客服
					</text>
					<text v-else>暂未开通线下商户</text>
				</view>
				<view class="bot-sction" v-if="sellerInfo.is_open_offline && sellerInfo.verify_status == 1&&sellerInfo.enabled== 0">
					<view class="left">
						<view class="simple">
							线下优惠比例： <text>{{Number(sellerInfo.rebate_proportion) || 0}}%</text>
						</view>
						<view class="simple">
							入驻时间： <text>{{sellerInfo.add_time}}</text>
						</view>
					</view>
					<view @tap="navTo('/business/shopInfo/managePage')" class="manage-btn" hover-class="hoverItem">管理中心</view>
				</view>

				<view class="notOpenBtn" v-if="!sellerInfo.is_open_offline">
					<text @tap="goOpen(sellerInfo.is_open_offline,sellerInfo.verify_status, sellerInfo.uncheck_reason, 'offline')">立即开通</text>
				</view>
				<view class="notOpenBtn" v-if="sellerInfo.is_open_offline&&sellerInfo.verify_status == -1&&sellerInfo.enabled== 0">
					<text @tap="goOpen(sellerInfo.is_open_offline,sellerInfo.verify_status, sellerInfo.uncheck_reason, 'offline')">查看详情</text>
				</view>
				<view class="notOpenBtn" v-if="sellerInfo.is_open_offline&&sellerInfo.enabled== 1">
					<text @tap="service()">联系客服</text>
				</view>
			</view>
			<view class="online-con" v-show="currentTab == 1">
				<view class="share" v-if="sellerInfo.is_open_online && sellerInfo.online_verify_status== 1&&sellerInfo.online_enabled == 0">
					<image :src="sellerInfo.online_logo" mode=""></image>
					<view class="right">
						<view class="title">
							<view class="title__name">
								<image v-if="sellerInfo.seller_type == 2" class="a" src="/static/images/public/123.png" mode=""></image>
								<text>{{sellerInfo.online_name }}</text>
								<image src="/static/images/index/index_shophot.png" mode="aspectFill"></image>
							</view>
						</view>
						<view class="info__rate">
							<uni-rate class="rate" active="white" normal="white" bgSeleColor="#E65431" bgNoSeleColor="grey" :isIndexRate="true"
							 :size="15" :current="5" disabled></uni-rate>
							<!-- <text>{{sellerInfo.consumers }}人来过</text> -->
						</view>
						<view class="info__type">入驻时间: {{sellerInfo.add_time}}</view>
						<!-- <view class="info__label">
							<view class="label_item" v-for="(it,ind) in sellerInfo.label" :key="ind">{{it}}</view>
						</view> -->
					</view>
				</view>
				<view class="statistical my-wallet" v-if="sellerInfo.is_open_online && sellerInfo.online_verify_status== 1&&sellerInfo.online_enabled == 0">
					<view class="simple" @tap="navTo('/business/walletBill/walletBill?state='+1)">
						<text class="desc">今日订单(个)</text>
						<view class="count">{{sellerInfo.online_today_pay_order_count}}</view>
					</view>
					<view class="simple" @tap="navTo('/business/myPromote/myPromote?status=online')">
						<text class="desc">今日贝壳收益(个)</text>
						<view class="count">
							<image src="/static/images/public/shellIcon.png" mode=""></image>
							{{sellerInfo.online_today_seller_shell_promote}}
						</view>
					</view>
				</view>
				<view class="notOpen" v-else>
					<text v-if="sellerInfo.online_verify_status == -1&&sellerInfo.is_open_online == 1&&sellerInfo.online_enabled == 0">审核失败，点击查看详情</text>
					<text v-else-if="sellerInfo.online_verify_status == 0&&sellerInfo.is_open_online == 1&&sellerInfo.online_enabled == 0">申请审核中，请耐心等待!</text>
					<text v-else-if="sellerInfo.online_enabled== 1">
						店铺被禁用,请联系客服
					</text>
					<text v-else>暂未开通线上商城</text>
				</view>

				<view class="bot-sction" v-if="sellerInfo.is_open_online && sellerInfo.online_verify_status == 1&&sellerInfo.online_enabled== 0">
					<!-- <view class="left">
						<view :class="currentTab == 1?'online':''" class="manage-btn">线上账单</view>
					</view> -->
					<view style="margin-left: 200rpx;" @tap="popupShow" :class="currentTab == 1?'online':''" class="manage-btn" hover-class="hoverItem">管理中心</view>
				</view>
				<view class="notOpenBtn" v-if="!sellerInfo.is_open_online" @tap="goOpen(sellerInfo.is_open_online, sellerInfo.online_verify_status, sellerInfo.online_verify_uncheck_reason, 'online')">
					<text>立即开通</text>
				</view>
				<view class="notOpenBtn" v-if="sellerInfo.is_open_online&&sellerInfo.online_verify_status == -1&&sellerInfo.online_enabled== 0" @tap="goOpen(sellerInfo.is_open_online, sellerInfo.online_verify_status, sellerInfo.online_verify_uncheck_reason, 'online')">
					<text>查看详情</text>
				</view>
				<view class="notOpenBtn" v-if="sellerInfo.online_enabled== 1" @tap="service()">
					<text>联系客服</text>
				</view>
			</view>
		</view>
		<uni-popup ref="popup" type="center">
			<view class="screenBox">
				<image class="logo" src="https://puhuishequ.oss-cn-beijing.aliyuncs.com/attach/2020-07/f10c1202007061012119827.png"
				 mode=""></image>
				<view class="title">恭喜您</view>
				<view class="contentBox">
					<text class="a">线上商铺入驻成功</text>
					<text class="b">请用电脑登录下列地址进行线上商铺管理线上商铺管理网址：</text>
					<view class="c">
						<text class="left">http://admin.ditanshequ.vip/admin</text>
						<!-- #ifndef H5 -->
						<text class="right" @tap="copy">复制</text>
						<!-- #endif -->
					</view>
					<view class="d">
						<text class="aa">账号：</text>
						<text class="bb">{{userInfo.phone}}</text>
					</view>
					<view class="d">
						<text class="aa">默认密码：</text>
						<text class="bb">123456</text>
					</view>
				</view>
				<view class="btn" @tap="close">我知道了</view>
			</view>
		</uni-popup>
	</view>
</template>
<script>
	import {
		formatDate
	} from '@/utils/util.js'
	import {
		sellerIndex,
		getsellershellcount,
		sellerCheckmodify,
	} from '@/api/merchant.js'
	import {
		announcementList
	} from '@/api/public.js'
	import utils from "@/common/utils.js"
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uniRate from '@/components/uni-rate/uni-rate.vue'
	import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue"
	import uuiTab from '@/components/uni-tabs/uni-tabs.vue'
	export default {
		components: {
			uniRate,
			uniNavBar,
			uuiTab,
			uniPopup
		},
		data() {
			return {
				navColor: '#fff',
				navBg: "inherit",
				loginType: false,
				userInfo: {},
				shellIcon: [{
						src: "../static/images/public/shellIcon.png"
					},
					{
						src: "../static/images/public/redShellIcon.png"
					},
					{
						src: "../static/images/public/yellowShellIcon.png"
					},
					{
						src: "../static/images/public/blueShellIcon.png"
					}
				],
				sellerInfo: {
					seller_name: ""
				},
				shellList: [
					{count:0},
					{count:0},
					{count:0},
					{count:0},
				],
				from: "",
				navbar: [{
						name: '线下门店'
					},
					{
						name: '线上商城'
					},
				],
				currentTab: 0,
				animation: false,
				noticeList: [],
				// #ifdef H5
				fixTop: 46,
				// #endif
				// #ifdef APP-PLUS
				fixTop: 56,
				// #endif
				//#ifdef MP-WEIXIN
				fixTop: getApp().globalData.MenuButtonBottom,
				//#endif
			}
		},
		onLoad(option) {
			if (option.scene) {
				//#ifdef H5
				let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
				let QRCodeRout = "/" + routes[routes.length - 1].route //获取当前页面路由
				uni.setStorageSync("QRCodeRout", QRCodeRout)
				//#endif
				let options = utils.urlDecode(option)
				uni.setStorageSync("sid", options.sid)
			} else if (option.sid) {
				//#ifdef H5
				let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
				let QRCodeRout = "/" + routes[routes.length - 1].route //获取当前页面路由
				uni.setStorageSync("QRCodeRout", QRCodeRout)
				//#endif
				uni.setStorageSync("sid", option.sid)
			}
		},
		onShow() {
			if (uni.getStorageSync("sid")) {
				uni.showModal({
					content:"请先登录",
					showCancel: false,
					success(res) {
						if(res.confirm) {
							uni.navigateTo({
								url: `/pages/login/login`
							})
						}
					}
				})
			} else {
				announcementList({
					page: 1,
					limit: 50,
					cate: 2
				}).then(res => {
					this.noticeList = res.data;
				})
				setTimeout(() => {
					this.animation = true
				}, 600)
				getsellershellcount().then(res => {
					res.data.list.map((val, key) => {
						val.count = this.$api.deciml(val.count)
						return val
					});
					this.shellList = res.data.list;
				
				});
				sellerIndex().then(res => {
					let a = res.data.seller_info;
					a.add_time = formatDate(new Date(a.add_time * 1000));
					a.today_seller_shell_promote = this.$api.deciml(String(a.today_seller_shell_promote));
					this.sellerInfo = a;
					uni.setStorageSync('sellerInfo', this.sellerInfo);
				});
			}
		},
		onPageScroll(e) {
			this.navBg = "rgba(255,255,255," + e.scrollTop / 80 + ')'
			if (e.scrollTop > 10) {
				this.navColor = "rgba(0,0,0," + e.scrollTop / 80 + ')'
			} else {
				this.navBg = "inherit"
				this.navColor = '#fff'
			}
		},
		methods: {
			service(){
				uni.makePhoneCall({
					phoneNumber: uni.getStorageSync("siteSerPhone")
				})
			},
			navTo(url) {
				uni.navigateTo({
					url: url
				})
			},
			goBack() {
				uni.redirectTo({
					url: "/pages/index/index?current=4"
				})
			},

			tabChange(e) {
				this.currentTab = e.index;
			},
			goOpen(open, state, msg, type) {
				if (!open) { //未开通
					return uni.navigateTo({
						url: "./shopInfo/shopInfoEdit?type=" + type
					})
				}
				if ([-1].includes(state) && open) {
					return uni.navigateTo({
						url: "./shopInfo/changeFail?msg=" + msg + "&from=" + type
					})
				}
			},
			copy() {
				uni.setClipboardData({
				    data: 'http://admin.ditanshequ.vip/admin',
				    success: function () {
				        uni.showToast({
				        	icon:"none",
							title:"复制成功"
				        })
				    }
				});
			},
			popupShow() {
				this.$refs.popup.open()
			},
			close() {
				this.$refs.popup.close()
			}
		},
		onHide() {
			this.$refs.popup.close()
		}
	}
</script>
<style lang='scss' scoped>
	.container {
		min-height: 100vh;
		background-color: #f5f5f5;
	}

	.manage-btn,
	button {
		&.hoverItem {
			box-shadow: 0px 4rpx 20rpx 0rpx rgba(0, 0, 0, 0.08);
		}
	}

	.header {
		background: url('https://inclusivecommunity.oss-cn-chengdu.aliyuncs.com/attach/2020-08/c9702202008211139232703.png') no-repeat;
		height: 350rpx;
		background-size: 100% 100%;
		box-sizing: border-box;
		position: relative;
		z-index: 999;

		.navTitle {
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			line-height: 30rpx;

			text:nth-of-type(1) {
				font-size: 32rpx;
				letter-spacing: 3rpx;
			}

			text:nth-of-type(2) {
				letter-spacing: 2rpx;
				margin-top: 6rpx;
				font-size: 16rpx;
				font-weight: bold;
			}
		}

		.checkout {
			position: absolute;
			top: 165rpx;
			right: 30rpx;
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			background-color: rgba(255,255,255,.1);
			z-index: 2;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			image {
				width: 50rpx;
				height: 50rpx;
			}

			text {
				font-size: 14rpx;
				font-weight: 400;
				color: rgba(255, 255, 255, 1);
			}
		}

		.logoBox {
			position: absolute;
			right: 20rpx;
			bottom: 10rpx;
			height: 35px;
			display: flex;
			justify-content: center;
			align-items: center;
		
			image {
				display: block;
				width: 46rpx;
				height: 48rpx;
			}
		
			.title {
				margin: 0 10rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				color: #fff;
		
				text:nth-of-type(1) {
					font-size: 11px;
					letter-spacing: 1px;
				}
		
				text:nth-of-type(2) {
					letter-spacing: 1.1px;
					margin-top: 3rpx;
					font-size: 5px;
					font-weight: bold;
				}
			}
		}
	}

	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}

	%flex-center {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.cover-container {
		position: relative;
		z-index: 3;
		padding-bottom: 50rpx;

		.notice-board {
			width: 95%;
			margin: 0 auto;
			padding-right: 30rpx;
			box-sizing: border-box;
			font-size: 20rpx;
			height: 60rpx;
			display: flex;
			align-items: center;
			z-index: 999;

			.icon-bg {
				padding-left: 30rpx;
				position: relative;
				z-index: 10;

				image {
					width: 24rpx;
					height: 24rpx;
				}
			}

			.animation {
				-webkit-animation: rolling 12s linear infinite;
				animation: rolling 12s linear infinite;
			}

			.scorll-view {
				flex: 1;
				line-height: 1;
				white-space: nowrap;
				overflow: hidden;
				color: #E42C00;
			}

			.notice {
				transform: translateX(100%);

				text {
					display: inline-block;
					margin-right: 40rpx;
				}
			}

			@-webkit-keyframes rolling {
				0% {
					transform: translateX(100%);
				}

				100% {
					transform: translateX(-170%);
				}
			}

			@keyframes rolling {
				0% {
					transform: translateX(100%);
				}

				100% {
					transform: translateX(-170%);
				}
			}
		}

		.shopCountBox {
			width: 716rpx;
			height: 320rpx;
			box-sizing: border-box;
			padding: 20rpx;
			margin: 0 auto 40rpx;
			background: url(https://puhuishequ.oss-cn-beijing.aliyuncs.com/attach/2020-07/315af202007061015111673.png) no-repeat;
			background-size: 716rpx 320rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;

			.my-wallet {
				text-align: center;

				.desc {
					margin-bottom: 28rpx;
					font-size: 22rpx;
					color: rgba(153, 153, 153, 1);
				}

				.simple {
					color: #333333;
					font-size: 42rpx;
					font-weight: bold;
					margin-top: 15rpx;
				}
			}
			
		}

		.btnBox {
			display: flex;
			justify-content: space-around;

			.btn {
				margin-bottom: 50rpx;
				background-color: $theme-color;
				width: 220rpx;
				height: 70rpx;
				line-height: 70rpx;
				text-align: center;
				font-size: 26rpx;
				color: #fff;
				border-radius: 35rpx;
				box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.08);
			}
		}

		.bot-sction {
			width: 90%;
			padding: 0 20rpx;
			margin: 120rpx auto 0;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			line-height: 37rpx;
			height: 74rpx;
			align-items: center;

			.left {
				font-size: 20rpx;

				.simple {
					color: #666666;

					text {
						color: #333333;
					}
				}

			}

			.manage-btn {
				width: 221rpx;
				height: 60rpx;
				line-height: 60rpx;
				text-align: center;
				background: rgba(87, 190, 106, 1);
				border-radius: 30rpx;
				font-size: 26rpx;
				color: rgba(255, 255, 255, 1);
				/* padding: 17rpx 59rpx; */
			}

			.manage-btn.online {
				background-color: #D32800;
			}
		}



		.condition-tab {
			margin-bottom: 30rpx;
		}

		.offline-con {
			background: url(https://puhuishequ.oss-cn-beijing.aliyuncs.com/attach/2020-07/b6a0020200706101511918.png) no-repeat;
			background-size: 716rpx 542rpx;
			height: 542rpx;

			.notOpenBtn {
				text {
					background-color: rgba(87, 190, 106, 1);
				}
			}
		}

		.online-con {
			height: 542rpx;
			background: url(https://puhuishequ.oss-cn-beijing.aliyuncs.com/attach/2020-07/b468b202007061015116947.png) no-repeat;
			background-size: 716rpx 542rpx;

			.notOpenBtn {
				text {
					background-color: #D32800;
				}
			}
		}

		.offline-con,
		.online-con {
			margin: 0 auto;
			width: 716rpx;
			position: relative;
			padding: 0 0 40rpx 0;
			box-sizing: border-box;

			.share {
				width: 90%;
				padding: 20rpx 10rpx 20rpx;
				margin: 0 auto;
				border-radius: 8rpx;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;

				image {
					width: 160rpx;
					height: 160rpx;
					border-radius: 6rpx;
					margin-right: 20rpx;
				}

				.right {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					width: 75%;

					.title {
						position: relative;
						display: flex;
						justify-content: space-between;

						.title__name {
							letter-spacing: 0.5rpx;
							font-weight: bold;
							color: rgba(51, 51, 51, 1);
							font-size: 28rpx;
							width: 450rpx;
							width: 100%;
							height: 40rpx;
							line-height: 40rpx;
							overflow: hidden;
							display: block;
							white-space: nowrap;
							text-overflow: ellipsis;

							image {
								width: 26rpx;
								height: 30rpx;
								margin-left: 10rpx;
							}

							.a {
								width: 70rpx;
								height: 28rpx;
								margin-right: 10rpx;
							}
						}

						.title__distance {
							color: #999999;
							font-size: 24rpx;
							position: absolute;
							right: 0;
							top: 0;

							image {
								width: 14rpx;
								height: 20rpx;
								margin-right: 3rpx;
							}
						}
					}

					.info__rate {
						.rate {
							margin-right: 30rpx;
						}

						text {
							font-size: 24rpx;
							font-weight: 400;
							color: rgba(51, 51, 51, 1);
						}
					}

					.info__type {
						font-size: 22rpx;
						font-weight: 400;
						color: rgba(153, 153, 153, 1);
					}

					.info__label {
						height: 45rpx;

						.label_item {
							display: inline-block;
							background: rgba(230, 84, 49, 1);
							border-radius: 4rpx;
							padding: 4rpx 6rpx;
							color: #FFFFFF;
							font-size: 20rpx;
							margin-right: 10rpx;
						}
					}

					.info {
						display: flex;
						justify-content: space-between;
						font-size: 20rpx;

						.left {
							color: #999;

							text:nth-of-type(1) {
								margin-right: 20rpx;
							}
						}

						.right {
							font-size: 26rpx;
							color: $theme-color;
						}
					}

					.detail {
						font-size: 24upx;
						color: #333;
						display: flex;
						justify-content: space-between;

						text:nth-of-type(1) {
							width: 320rpx;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}

						text:nth-of-type(2) {
							color: #999;
						}
					}
				}
			}



			.notOpen {
				text-align: center;
				font-size: 36rpx;
				font-weight: bold;
				color: #999;
				padding-top: 150rpx;
			}

			.notOpenBtn {
				margin-top: 220rpx;
				text-align: center;

				text {
					display: block;
					margin: 0 auto;
					width: 200rpx;
					height: 70rpx;
					color: #fff;
					border-radius: 35rpx;
					font-size: 28rpx;
					line-height: 70rpx;
				}
			}

			.my-wallet {
				padding-top: 30rpx;
				text-align: center;

				.desc {
					margin-bottom: 20rpx;
					font-size: 22rpx;
					color: rgba(153, 153, 153, 1);
				}

				.simple {
					color: #333333;
					font-size: 24rpx;
					font-weight: bold;
					margin-top: 15rpx;
				}

				.num {
					font-size: 42rpx;
				}
			}

			.statistical {
				padding-top: 0;
				display: flex;
				justify-content: space-around;

				.simple {
					height: 80rpx;
					width: 50%;

					image {
						width: 30rpx;
						height: 20rpx;
						margin-right: 9rpx;
					}
				}

				.count {
					margin-top: 15rpx;
					font-size: 42rpx;
				}
			}
		}
	}

	.screenBox {
		width: 660rpx;
		height: 880rpx;
		background: url(https://puhuishequ.oss-cn-beijing.aliyuncs.com/attach/2020-07/48d47202007061012115720.png) no-repeat;
		background-size: 660rpx 880rpx;
		position: relative;

		.logo {
			width: 180rpx;
			height: 180rpx;
			position: absolute;
			left: 240rpx;
			top: 183rpx;
			z-index: 2;
		}

		.title {
			position: absolute;
			top: 80rpx;
			width: 100%;
			text-align: center;
			font-size: 60rpx;
			font-weight: 500;
			color: rgba(253, 250, 249, 1);
			text-shadow: 0px 4rpx 10rpx rgba(6, 88, 21, 0.3);
		}
		.contentBox{
			position: absolute;
			top:217rpx;
			left: 60rpx;
			padding: 160rpx 20rpx 0;
			box-sizing: border-box;
			width:540rpx;
			height:500rpx;
			background:rgba(255,255,255,1);
			border-radius:20rpx;
			display: flex;
			flex-direction: column;
			text-align: left;
			color: #999;
			font-size: 24rpx;
			text-align: justify;
			line-height: 50rpx;
			.a{
				text-align: center;
				font-size: 32rpx;
				color: #333;
				margin-bottom: 35rpx;
			}
			.c{
				display: flex;
				justify-content: space-between;
				.left{
					color: $theme-color;
				}
				.right{
					font-size: 18rpx;
					color: #333;
				}
			}
			.d{
				.bb{
					color: $theme-color;
				}
			}
		}
		.btn{
			position: absolute;
			left: 78rpx;
			width:504rpx;
			height:77rpx;
			line-height: 77rpx;
			text-align: center;
			color: #fff;
			font-size: 28rpx;
			background:$theme-color;
			box-shadow:0px 4rpx 20rpx 0px rgba(87,190,106,0.4);
			border-radius:39rpx;
			bottom: 43rpx;
		}
	}
</style>
